<!DOCTYPE html>
<html>
	<head lang="en">
    <<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/layout.css">

<style>
	.list-group-horizontal .list-group-item {
		display: inline-block;
	}
	.list-group-horizontal .list-group-item {
		margin-bottom: 0;
		margin-left:-4px;
		margin-right: 0;
	}
	.list-group-horizontal .list-group-item:first-child {
		border-top-right-radius:0;
		border-bottom-left-radius:4px;
	}
	.list-group-horizontal .list-group-item:last-child {
		border-top-right-radius:4px;
		border-bottom-left-radius:0;
	}
	</style>
	</head>
	<body>
	      


		   <div class="container">
	<div class="row" style="padding-top:50px">
		
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center">

            <div class="list-group list-group-horizontal">
                <a id="id1" href="#" onclick="send(1)" class="list-group-item active">Login</a>
                <a id="id2" href="#" onclick="send(2)" class="list-group-item">updateuser</a>
                <a id="id3" href="#" onclick="send(3)" class="list-group-item">updatePw</a>
                <a id="id4" href="#" onclick="send(4)" class="list-group-item">NewUser</a>
				<a id="id5" href="#" onclick="send(5)" class="list-group-item">test</a>
            </div>

        </div>
       

	</div>
</div>

<form class="form-horizontal" role="form">
     
	 <input type="hidden" class="form-control" id="myaction" name="myaction"				   placeholder="passwd">
	<div id="name" class="form-group">
		<label for="name" class="col-sm-2 control-label">username</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="username" name="username"				   placeholder="username">
		</div>
	</div>

	<div id="pass" class="form-group">
		<label for="passwd" class="col-sm-2 control-label">passwd</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="passwd" name="passwd"				   placeholder="passwd">
		</div>
	</div>
	
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="button" id="myBut" onclick="" class="btn btn-default">submit</button>
		</div>
	</div>
</form>
	</body>

	<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" rel="script" src="js/bootstrap.min.js"></script>




<script type="text/javascript">
    
	 function send(myid){
		 did = "id"+myid;
		 document.getElementById('id1').className = 'list-group-item';
		 document.getElementById('id2').className = 'list-group-item';
		 document.getElementById('id3').className = 'list-group-item';
		 document.getElementById('id4').className = 'list-group-item';
		 document.getElementById('id5').className = 'list-group-item';
		 document.getElementById(did).className = 'list-group-item active';
   
        $('#myaction').val(myid);
        
     

		 }

	$(function() {
		$('#myBut').click(function() {

            var url;

			var myaction = $('#myaction').val();
			if(myaction==2){
                 url="http://localhost:8080/base/updateuser";
		    }else if(myaction==3){
                url="http://localhost:8080/base/updatePw";
			}else if(myaction==4){
                url="http://localhost:8080/base/NewUser";
			}else if(myaction==5){
                url="http://localhost:8080/base/test";
			}else{
               url="http://localhost:8080/base/Login"
		     }


var username = $('#username').val();

var passwd = $('#passwd').val();
             

			$.get(url, {
				passwd : passwd,
				username : username
			}, function(data, textStatus) {
				alert(data);
				//var container = $('#container');
				//var resultData = $.parseJSON(data);
				//var age = resultData.age;
				//var name = resultData.name;
				//container.html("name:" + name + "," + "age:" + age);
			});
		});
	});
</script>

</html>
